<template>
  <div class="grid-resource">
    <split-line text="网格力量" icon @iconclick="showGridResource" />
    <a-row type="flex" :gutter="10">
      <a-col v-for="item of generalDutyTeamList" :key="item.key" :span="12" class="flex-box">
        <corner-border-box v-bind="Object.assign({}, item.event)">
          <div class="con-center">
            <div>
              <p class="value" :style="{ color: item.color }">
                {{ dutyTeamData[item.key] || 0 }}
              </p>
              <p class="name">{{ item.name }}</p>
            </div>
          </div>
        </corner-border-box>
      </a-col>
    </a-row>
    <info-title style="margin: 16px 0 15px; color: #5f92d3" color="#fff">值班队伍</info-title>
    <a-row type="flex" :gutter="10">
      <a-col
        v-for="item of generalGridResourceList"
        :key="item.key"
        :span="8"
        class="flex-box"
        style="margin-bottom: 15px"
      >
        <corner-border-box v-bind="Object.assign({}, item.event)">
          <div
            class="con-center"
            @click="showDutyTeam({ title: item.name, typeCode: item.type_code, managerLevel: item.manager_level })"
          >
            <div>
              <p class="value" :style="{ color: item.color }">{{ gridResourceData[item.key] || 0 }}</p>
              <p class="name">{{ item.name }}</p>
            </div>
          </div>
        </corner-border-box>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import SplitLine from '@/components/split-line.vue';
import CornerBorderBox from '@/components/corner-border-box.vue';
import { useUserInfoStore } from '@gis/lib/pinia/userInfo.js';

export default {
  name: 'grid-resource',
  components: { SplitLine, CornerBorderBox },
  data() {
    return {
      generalGridResourceList: [
        {
          name: '综治车辆',
          key: 'zzcl',
          type_code: 'zzcl',
          value: 0,
          color: '#ffffff',
        },
        {
          name: '民警',
          key: 'mj',
          type_code: 'zz_01_05',
          manager_level: 1,
          value: 0,
          color: '#ffffff',
        },
        {
          name: '辅警',
          key: 'fj',
          type_code: 'zz_01_06',
          manager_level: 1,
          value: 0,
          color: '#ffffff',
        },
        {
          name: '网格长',
          key: 'wgz',
          type_code: 'zz_01_07',
          manager_level: 3,
          value: 0,
          color: '#ffffff',
        },
        {
          name: '专职网格员',
          key: 'wgy',
          type_code: 'zz_01_07',
          manager_level: 1,
          value: 0,
          color: '#ffffff',
        },
        {
          name: '巡防队员',
          key: 'xfdy',
          type_code: 'zz_01_02',
          manager_level: 1,
          value: 0,
          color: '#ffffff',
        },
      ],
      generalDutyTeamList: [
        {
          name: '今日值班人数',
          key: 'jrzbrs',
          value: 0,
          color: '#ffffff',
        },
        {
          name: '在线人数',
          key: 'zxrs',
          value: 0,
          color: '#63E461',
        },
      ],
      gridResourceData: {},
      dutyTeamData: {},
    };
  },
  computed: {
    areaCode() {
      const { area_code } = useUserInfoStore();
      return area_code;
    },
  },
  watch: {
    areaCode: {
      immediate: true,
      handler() {
        this.getGridResourceCountAsync();
        this.getDutyTeamAsync();
      },
    },
  },
  methods: {
    async getGridResourceCountAsync() {
      const params = {
        area_code: this.areaCode,
      };
      if (!params.area_code) {
        return;
      }
      const res = await this.$axios.get('/xw-microservice/xw-analysis/v3/zz_people/getGridPower', {
        params: Object.assign({}, params),
      });
      if (res.code === 200) {
        const m = res.data.reduce((res, item) => {
          return Object.assign(res, { [item.name]: item.value });
        }, {});
        this.gridResourceData = Object.assign({}, this.gridResourceData, {
          zzcl: m['车辆'],
          mj: m['民警'],
          fj: m['辅警'],
          xfdy: m['巡防队员'],
          wgz: m['网格长'],
          wgy: m['专职网格员'],
        });
      } else {
        console.error('请求网格力量统计失败：' + res.msg);
      }
    },
    async getDutyTeamAsync() {
      const params = {
        area_code: this.areaCode,
      };
      if (!params.area_code) {
        return;
      }
      const res = await this.$axios.get('/xw-microservice/xw-analysis/v3/zz_people/getDutyPeopleCount', {
        params: Object.assign({}, params),
      });
      if (res.code === 200) {
        const m = res.data.reduce((res, item) => {
          return Object.assign(res, { [item.name]: item.cou });
        }, {});
        this.dutyTeamData = Object.assign({}, this.dutyTeamData, {
          jrzbrs: m.zbzs,
          zxrs: m.zxrs,
        });
      } else {
        console.error('请求值班队伍统计失败：' + res.msg);
      }
    },
    showGridResource(e = {}) {
      const { typeCode } = e;
      dialog({
        content: () => import('./popup-grid-resource.vue'),
        contentProps: { typeCode, show: false },
        dialogProps: {
          title: '网格力量',
          width: 'medium',
          height: 'fixed',
          footer: null,
        },
      });
    },
    showDutyTeam(e = {}) {
      const { title, typeCode, managerLevel } = e;
      if (!typeCode) {
        return;
      }
      if (typeCode === 'zzcl') {
        //综治车辆
        dialog({
          content: () => import('./duty-car-dialog.vue'),
          contentProps: { typeCode, managerLevel },
          dialogProps: {
            title: title,
            width: 'medium',
            height: 'fixed',
            footer: null,
          },
        });
      } else {
        //值班人员
        dialog({
          content: () => import('./duty-team-dialog'),
          contentProps: { typeCode, managerLevel },
          dialogProps: {
            title: title,
            width: 'medium',
            height: 'fixed',
            footer: null,
          },
        });
      }
    },
  },
};
</script>

<style scoped lang="less">
.grid-resource {
  .con-center {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 20px;
    padding-bottom: 20px;
  }
  p {
    margin: 0;
    line-height: 1;
  }
  .flex-box {
    display: flex;
    justify-content: flex-start;
    align-items: center;

    & > div {
      flex: auto;
      width: 100%;
      text-align: left;
    }
  }
  .value {
    font-size: 30px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 3px;
  }
  .name {
    font-size: 14px;
    font-weight: 400;
    color: #c6c6c6;
  }
}
</style>
